<template>
  <div style="display: inline-block; text-align: left">
    <el-button type="success" title="历史订单" style="margin-top: 5px" @click="getOrderList()">历史订单</el-button>
    <el-dialog v-el-drag-dialog :visible.sync="dialogTableVisible" width="900px" title="历史订单" @close="close">
      <el-table v-loading="listLoading" :key="tableKey" :data="list" element-loading-text="拼命加载中..." border fit highlight-current-row style="width: 100%;">
        <el-table-column v-if="formThead.id" align="center" label="id">
          <template slot-scope="scope">
            <span>{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="formThead.orderNo" align="center" label="订单编号">
          <template slot-scope="scope">
            <span>{{ scope.row.orderNo }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="formThead.orderStatus" align="center" label="订单状态">
          <template slot-scope="scope">
            <span v-if="scope.row.orderStatus==='cancel'">交易关闭</span>
            <span v-else-if="scope.row.orderStatus==='success'">交易完成</span>
            <span v-else-if="scope.row.orderStatus==='refundSuccess'">退款成功</span>
            <span v-else-if="scope.row.orderStatus==='shipments'">待发货</span>
            <span v-else-if="scope.row.orderStatus==='obligation'">待支付</span>
            <span v-else-if="scope.row.orderStatus==='receiving'">待收货</span>
            <span v-else-if="scope.row.orderStatus==='afterSale'">售后</span>
            <span v-else-if="scope.row.orderStatus==='returnSuccess'">退货成功</span>
          </template>
        </el-table-column>
        <el-table-column v-if="formThead.payPrice" align="center" label="支付金额">
          <template slot-scope="scope">
            <span>{{ scope.row.payPrice }}</span>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination :current-page="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit" :total="total" background layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import elDragDialog from '@/directive/el-dragDialog' // base on element-ui
import store from '@/store'
import { getOrderList } from '@/api/user/user'
export default {
  name: 'DragDialogDemo',
  directives: { elDragDialog },
  props: {
    row_data: {
      type: Number,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function() {
        return null
      }
    }
  },
  data() {
    return {
      list: [],
      tableKey: 0,
      orderList: [],
      total: null,
      listLoading: true,
      dialogTableVisible: false,
      listQuery: {
        id: undefined,
        orderNo: undefined,
        orderStatus: undefined,
        payPrice: undefined,
        page: 1,
        limit: 20
      },
      formThead: {
        id: false,
        orderNo: true,
        orderStatus: true,
        payPrice: true
      }
    }
  },
  methods: {
    getOrderList() {
      this.dialogTableVisible = true
      this.listLoading = true
      this.id = this.row_data
      getOrderList(store.getters.token, { user_id: this.id }).then(response => {
        this.list = response.data.list.data
        this.total = response.data.list.total
        this.listLoading = false
      })
    },
    close() {
      this.$emit('getLists')
      this.dialogTableVisible = false
    }
  }
}
</script>
<style>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand.el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 75%;
  }
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 100%;
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
